<template>
  <div
    class="cms-views-container player-cms-pages"
    :class="type === 2 || type === 5 || type === 4 ? 'h-full' : type === 9 ? 'h-[667px]' : 'h-[1470px]'"
  >
    <CmsPlayerView :type="type" v-if="type !== 6" />

    <CmsBuyOrder :type="1" noHeader v-else />

    <!-- 视频简介 -->
    <CmsVideoIntroduction :type="type" v-if="type !== 2 && type !== 5" />

    <!-- 播放线路 -->
    <CmsPlayerLines v-if="type !== 2 && type !== 5" />

    <!-- 选集 -->
    <CmsSelectWorks
      showMore
      :type="1"
      v-if="type === 1 || type === 6 || type === 7 || type === 8 || type === 9 || (type !== 2 && type !== 5)"
      @click="handleClick('videoAnthology')"
      :class="{ 'component-selected': select === 'videoAnthology' }"
    />
    <!-- 播放语言 -->
    <CmsPlayerLines v-if="type !== 2 && type !== 5 && type === 3" :componentType="2" />

    <!-- 暂时没有用到 -->
    <!-- <div v-if="type === 4" class="pl-4 mt-4">
      <p class="flex items-center justify-between pr-4 mb-0">
        <span class="text-sm font-medium text-black">选集</span>
        <span class="text-[#8f9299] text-xs">更多 ></span>
      </p>
      <p class="mt-[13px] text-sm text-[#333]">
        <span>第1季</span>
        <span class="px-7">第2季</span>
        <span class="login-primary special">特辑</span>
      </p>
      <div class="video-grid">
        <div class="video" v-for="(item, index) in 3" :key="index">
          <div class="video_shadow">
            <img :src="homeIcons.film" alt="" class="img-show" />
          </div>
          <p class="episodes tur">期数</p>
          <p class="mt-1 title">视频名称</p>
          <div v-if="index % 2 === 0" class="free">免费</div>
          <div v-else class="gold">
            <dollar-outlined class="gold-icon" />
            <span>100</span>
          </div>
        </div>
      </div>
    </div> -->

    <!-- 猜你喜欢 -->
    <CmsGridView
      :type="2"
      title="猜你喜欢"
      v-if="type !== 2 && type !== 5 && type !== 9"
      class="bg-[#f6f8fb] mt-4"
      @click="handleClick('guessYouLike')"
      :class="{ 'component-selected': select === 'guessYouLike' }"
    />
    <!-- 更多集数展开 -->
    <CmsSelectWorks :type="1" player v-if="type === 2" />
    <!-- 更多首页板块 -->
    <CmsVarietyList :type="1" v-if="type === 5" />
    <!-- 底部功能按钮 -->
    <CmsBottomFunction
      :type="1"
      v-if="type !== 2 && type !== 5 && type !== 9"
      class="absolute bottom-0 left-0 right-0 h-12"
      @click="handleClick('bottomFunction')"
      :class="{ 'component-selected': select === 'bottomFunction' }"
    />

    <div v-if="type === 9" class="playe-masker-nine"></div>

    <div
      v-if="type === 9"
      class="h-[224px] absolute bottom-0 right-0 left-0 bg-white w-full rounded-tr-lg rounded-tl-lg"
    >
      <h2 class="h-11 flex items-center justify-center mt-2 text-[#48494d] text-sm">分享</h2>
      <span class="px-[30px] flex flex-col">
        <span class="w-12 h-12 text-center bg-[#eff3fa] mb-2" style="line-height: 48px; border-radius: 50%">图标</span>
        <span class="text-xs">复制链接</span>
      </span>
      <p class="text-center h-[52px] text-sm pt-4 mt-5" style="border-top: 1px solid #f1f5f7">取消</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { withDefaults } from 'vue'
import CmsComponents from '@cms/components'
import type { ComponentKeys } from '@cms/h5-editor'

const {
  CmsGridView,
  CmsSelectWorks,
  CmsVarietyList,
  CmsBuyOrder,
  CmsBottomFunction,
  CmsPlayerView,
  CmsVideoIntroduction,
  CmsPlayerLines
} = CmsComponents

withDefaults(defineProps<{ type: number; select?: ComponentKeys | undefined }>(), { type: 1 })

const emit = defineEmits<{
  (event: 'select', key: ComponentKeys): void
}>()

const handleClick = (key: ComponentKeys) => {
  emit('select', key)
}
</script>

<style scoped lang="less">
.player-cms-pages {
  .playe-masker-nine {
    height: calc(100% - 220px);
    background: rgba(0, 0, 0, 0.3);
    @apply absolute top-0 left-0 right-0;
  }
}
</style>
